<template>
	<view class="help-container">
		<view class="top">
			<view class="top-left data-picker">{{queryParams.usageDate}}</view>
			<picker v-model="queryParams.usageDate" mode="date" @change="onDateChange">
				<view><i class="iconfont">&#xe657</i></view>
			</picker>
		</view>
		<view v-for="(usage,index) in usageList" :key="index" class="context">
			<image :src="usage.image" alt="" />
			<view class="text">
				<view style="font-weight: 900;">{{usage.usageName}}</view>
				<view style="padding: 8rpx 0 8rpx 0;">{{usage.usageSpecification}}</view>
				<view class="shu">数量：{{usage.usageQuantity}}</view>
				<view class="shi">时间：{{usage.usageDate}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import {listUsage} from "@/api/usage/usage";
import {getUserProfile} from "@/api/system/user";
import {listOffice} from "@/api/system/office";
import config from "../../../config";

export default {
		data() {
			return {
				list: [],
				usage: null,
				user: null,
				office: null,
				officeList: [],
				usageList: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 999999999,
					usageName: null,
					usagePeople: this.$store.state.user.name,
					usageDate: null,
					usageDepartment: null,
					usageState: null,

				},
				src: '../../../static/images/R-C.jfif',
				img: '',
			}
		},
		created() {
			this.getUser();

			this.getoffice();

			this.getUsage();
		},
		computed: {

		},
		methods: {
			onPullDownRefresh() {
				console.log("触发下拉");
				// this.setData({
				//   count:0
				// })
				wx.stopPullDownRefresh()
			},
			getUser() {
				getUserProfile().then(response => {
					this.user = response.data
					this.queryParams.userName = response.data.userName
					console.log("username" + this.user.userName)
				})
			},
			getUsage() {
				listUsage(this.queryParams).then(response => {
					console.log('=============');
					console.log(response);
					this.list = response.rows;
					this.usageList = response.rows
					this.usageList = this.list.filter(item => item.usagePeople === this.user.userName);
					this.usageList.forEach(item => {
						if (!item.image) {
							item.image = this.src;
						}
						this.officeList.forEach(produce => {
							if (item.usageName === produce.officeName) {
								item.image = config.baseUrl + produce.officeImage

							}
						})
					})
					console.log('物品列表');
					console.log(this.usageList);
					// console.log(response)
					// console.log(this.list)
					// console.log(this.usageList)
					this.$nextTick(() => {
						console.log('DOM 已经更新');
					});
				})
			},

			getoffice() {
				listOffice().then(Response => {
					this.officeList = Response.rows;
					console.log(this.officeList)
				})

			},
			onDateChange: function(e) {
				console.log(e.detail.value);
				console.log(this.usageList)
				this.queryParams.usageDate = e.detail.value;
				this.usageList.forEach(item => {
					console.log(item.usageDate.includes(this.queryParams.usageDate));
				})
				// this.usageList = this.list.filter(item => item.usageDate === this.queryParams.usageDate &&
				// 	item.usagePeople === this.user.userName);

				this.usageList = this.list.filter(item => item.usageDate.includes(this.queryParams.usageDate));


			},

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}

	.help-container {



		.top {
			//background-color: palegreen;
			display: flex;
			justify-content: space-between;
			padding: 15rpx 25rpx;

		}

		.context {
			height: 250rpx;
			//background-color: deeppink;
			margin: 0 25rpx;
			padding: 20rpx 0 20rpx 0;
			border-top: black 2rpx solid;
			display: flex;

			image {
				//background-color: cadetblue;
				width: 280rpx;
				height: 200rpx;
			}

			.text {
				padding-left: 30rpx;
				width: 420rpx;
				position: relative;

				.shu {
					position: absolute;
					bottom: 40rpx;
				}

				.shi {
					position: absolute;
					bottom: 5rpx;
				}
			}


		}

	}
</style>